<template>
    <view class="gy-badge">
        <view v-if="props.value" class="gy-badge-number">
			<text>{{ props.value }}</text>
		</view>
        <slot></slot>
    </view>
</template>

<script lang="ts" setup>
    const props = defineProps({
        value: {
            type: Number
        },
		heightVal:{
			type:Number,
			default:30
		},
		widthVal:{
			type:Number,
			default:30
		}
    });

</script>

<style lang="scss" scoped>
	.gy-badge{
	    position: relative;
	    .gy-badge-number{
	        position: absolute;
	        top: 0rpx;
	        right: -7rpx;
	        min-width: 30rpx;
	        height: 30rpx;
	        @include flex-center-center;
	        border-radius: 50%;
	        background: var(--gy-color-error);
			transform: scale(0.8);
			color: #ffffff;
			text{
				font-size: var(--gy-font-size-small);
				transform: scale(0.7);
			}
	    }
	}
</style>